<template>
  <div>
    <a-layout id="components-layout-demo-custom-trigger">
      <left-tab></left-tab>
      <a-layout>
        <a-layout-content :style="{ margin: '0px', padding: '24px', background: '#fff', minHeight: '280px' }">
         <route-view></route-view> 
        </a-layout-content>
      </a-layout> 
    </a-layout>    
  </div>
</template>
<script>
import { mixinDevice } from '@/utils/mixin.js'
import { mapActions, mapGetters, mapState } from 'vuex'
import leftTab from '../leftTab/leftTab.vue'
import Vue from 'vue'
import { CACHE_INCLUDED_ROUTES } from '@/store/mutation-types'
import RouteView from './RouteView.vue'
export default {
  name: 'LeftTabLayout',
  components: {
    leftTab,
    RouteView
  },
  mixins: [mixinDevice],
  provide() {
    return {
      receiveData: this.receiveData, // 提供方法 
    };
  },
  data() {
    return {
      mode: 'inline',
      tabPosition: 'left',
      mainInfoHeight: '100%',
      openKeys: [],
      selectedKeys: [],
      title: '',
      componentName: '',
      menuLeftData: [],
      routesInfo: [],
      collapsed:false,
    }
  },
  computed: {
 
    keepAlive() {
      return this.$route.meta.keepAlive
    },
  },
  created() {},

  mounted() {
    this.mainInfoHeight = window.innerHeight - 285 + 'px'
  },
  methods: {
    collapsedHandle(collapsed) { 
        this.collapsed=collapsed
    },
  },
}
</script>
<style lang="less" scoped>
// .ant-layout-sider-light {
//   flex: 0 0 150px !important;
//   max-width: 150px !important;
//   min-width: 150px !important;
//   width: 150px !important;
// }
.ant-layout-content {
  padding: 0 !important;
}
/deep/.menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: #e6f7ff !important;
}
</style>
